<template>
  <div id="home" >
    <vue-particles
      color="#dedede"
      :particleOpacity="0.7"
      :particlesNumber="40"
      shapeType="star"
      :particleSize="4"
      linesColor="#FFFFFF"
      :linesWidth="2"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="cash"
    >
    </vue-particles>
    <div class="header">
      <div class="nav-item">WORKSPACE
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-renwu"></use>
        </svg>
      </div>
      <div class="nav-item">Manage workspace
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xinxi"></use>
        </svg>
      </div>
      <div class="nav-item">Back
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-faxian"></use>
        </svg>
      </div>
      <div class="nav-item">Homepage
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shouye"></use>
        </svg>
      </div>
    </div>
    <div class="main">
      <div id="app" >
        <div style="display: flex; width: 100%; height: 100%">
          <div style="width: 20%">
            <el-aside width="100%" style="background-color: rgb(233, 241, 246)">
              <el-menu :router=true :default-active="$route.name" unique-opened="true">

              </el-menu>
            </el-aside>
          </div>
          <div style="width: 80%">
            <router-view></router-view>
          </div>
        </div>
      </div>
<!--      <div class="search_input_name">-->
<!--        <button @click="search" class="button-get">search</button>-->
<!--        <input type="text" placeholder="input name" v-model="input_name"/>-->
<!--      </div>-->
      <div class="search_input_name">
        <button @click="search" class="button-get">search</button>
        <input type="text" placeholder="input name" v-model="input_name"/>
        <button @click="cancel" class="button-get" style="float: right; margin-right: 10px">cancel</button>
      </div>
      <div class="form" style="overflow-y: auto">
        <div class="form3" v-for="(item,index) in project_name" :key="index">
          {{index+1}}   {{item}}
          <button class="button_run" @click="run">run{{index+1}}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show_flag: false,
      add_get_list: true,
      project_name: ['zcy', 'demo', 'demo2', 'demo3', 'demo4', 'demo5', 'demo6', 'demo4', 'demo5', 'demo6'],
      project_names: ['zcy', 'demo', 'demo2', 'demo3', 'demo4', 'demo5', 'demo6', 'demo4', 'demo5', 'demo6'],
      input_name: '',
      a: '',
      num: ''
      // loading: true
    }
  },
  created() {},
  methods: {
    search() {
      this.a = this.project_name.length;
      for (var i = 0; i < this.a; i++) {
        // console.log(this.project_name[i]);
        if (this.project_name[i] === this.input_name) {
          for (var j = 0; j < this.a; j++) {
            this.project_name.pop()
          }
          this.project_name.push(this.input_name);
          this.input_name = '';
        }
      }
    },
    cancel() {
      this.project_name = this.project_names;
    },
    run() {
      console.log('run' + this.num);
      // console.log(button.name + '111');
      // Button
      // let btn
      // btn = sender as Button
      // if( btn != null ){
      //   console.log( btn.id)
      // }
    }
  }
};
</script>
<style>
ul,
li {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: 25px;
}
#home {
  width: 100vw;
  height: 100vh;
  background: url("../assets/view2.jpg") no-repeat;
  background-size: cover;
  background-position: left;
  overflow: hidden;
  opacity:0.8;
  font-family: FZShuTi;
  font-size: 35px;
}
.projects{
  height: 600px;
}
.cash {
  position:fixed;
  top:180px;
  width:100%;
}
.button_run{
  margin: 0 0 0 0;
}
.header {
  height: 50px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.search_input_name {
  margin: -300px 0px 0 0px;
  width: 1322px;
  /*height: 550px;*/
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  background-color:rgba(255,255,255,0.7);
  /*margin: -25px 0px 0px 0px;*/
  padding: 10px 0 5px 28px;
  float: left;
  display: block;
}
.nav-item {
  height: 100%;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px 1px #ffb6c1;
  cursor: pointer;
}

.nav-item:active,

button:active{
  background-color: lightblue;
  color: #ffffff;
}
.button-get{
  margin: 0 0 0 0;
}
.button-post{
  margin: 0 45px 0 15px;
}
.title:active ~ .lt-menu {
  display: block;
}

.main {
  width: 100%;
  height: 100%;
  position: relative;
}

.form {
  width: 1300px;
  height: 550px;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  background-color:rgba(255,255,255,0.7);
  margin: 7px 0px 0px 0px;
  padding: 0px 0 0 50px;
}
.form1 {
  width: 800px;
  height: 545px;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  background-color:rgba(255,255,255,0.7);
  margin: -10px 0px 0px 235px;
  padding: 55px 0 0 180px;
}
.form3{
  display: none;
  float: left;
  width: 1200px;
  height: 30px;
  border-color: #cecec9;
  margin: 35px 0 0 0;
  font-size: 41px;
}
input {
  height: 35px;
  border: 1px solid #ccc;
  /* -webkit-box-shadow: 1px 1px 1px 1px #ffb6c1; */
  /* box-shadow: 1px 1px 1px 1px #f1f0f0; */
  margin: 8px 0px 0 0;
  width: 230px;
  font-family: FZShuTi;
  font-size: 23px;
}

button{
  height: 50px;
  border: 1px solid #fff;
  margin-bottom: 30px;
  width: 150px;
  cursor: pointer;
  background-color: #ffffff;
  font-family: FZShuTi;
  font-size: 30px;
}

.form div{
  display: flex;
  align-items: center;
  justify-content: space-between;/*弹性布局*/
}
#app {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: left;
  overflow: hidden;
  opacity:0.8;
  position: absolute;
  display: flex;
  position: absolute;
  justify-content: center;
  left: 0;
  top: 0;
  overflow: auto;
}
</style>
